<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/article/manage.css" />
    <script src="/js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>文章管理</title>
</head>
<body>
    <div class="manage" id="app">
        <div class="item" v-for="article in list">
            <div class="item_info">
                <div class="article_title">{{article.title}}</div>
            </div>
            <div class="item_btn_group">
                <div class="btn" v-on:click="deleteArticle(article)">删除</div>
                <div class="btn">修改</div>
            </div>
        </div>
    </div>
    <script>
        
        var app = new Vue({
                    el: '#app',
                    data: {
                        list: [],
                        message: 'Vue的生命周期'
                    },
                    beforeCreate: function() {
                        
                        // console.group('------beforeCreate创建前状态------');
                        // console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
                        // console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
                        // console.log("%c%s", "color:red","message: " + this.message) 
                        // console.log('this.--', this);
                        // console.log('getArticleList', this.getArticleList);
                    },
                    created: function() {
                        // console.group('------created创建完毕状态------');
                        // console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                        // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
                        // console.log("%c%s", "color:red","message: " + this.message); //已被初始化
                        // console.log('this.--', this);
                        // console.log('getArticleList', this.getArticleList);
                        this.getArticleList();
                    },
                    beforeMount: function() {
                        // console.group('------beforeMount挂载前状态------');
                        // console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
                        // console.log(this.$el);
                        // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
                        // console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
                        // console.log('this.--', this);
                        // console.log('getArticleList', this.getArticleList);
                    },
                    mounted: function() {
                        // console.group('------mounted 挂载结束状态------');
                        // console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
                        // console.log(this.$el);    
                        // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                        // console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
                    },
                    beforeUpdate: function () {
                        // console.group('beforeUpdate 更新前状态===============》');
                        // console.log("%c%s", "color:red","el     : " + this.$el);
                        // console.log(this.$el);   
                        // console.log("%c%s", "color:red","data   : " + this.$data); 
                        // console.log("%c%s", "color:red","message: " + this.message); 
                    },
                    updated: function () {
                        // console.group('updated 更新完成状态===============》');
                        // console.log("%c%s", "color:red","el     : " + this.$el);
                        // console.log(this.$el); 
                        // console.log("%c%s", "color:red","data   : " + this.$data); 
                        // console.log("%c%s", "color:red","message: " + this.message); 
                    },
                    beforeDestroy: function () {
                        // console.group('beforeDestroy 销毁前状态===============》');
                        // console.log("%c%s", "color:red","el     : " + this.$el);
                        // console.log(this.$el);    
                        // console.log("%c%s", "color:red","data   : " + this.$data); 
                        // console.log("%c%s", "color:red","message: " + this.message); 
                    },
                    destroyed: function () {
                        // console.group('destroyed 销毁完成状态===============》');
                        // console.log("%c%s", "color:red","el     : " + this.$el);
                        // console.log(this.$el);  
                        // console.log("%c%s", "color:red","data   : " + this.$data); 
                        // console.log("%c%s", "color:red","message: " + this.message)
                    },
                    methods: {
                        deleteArticle: function(article) {
                            console.log('article--', article);
                            var _this = this;
                            $.ajax({
                                url: '/api/article/delete',
                                type: 'POST',
                                data: {
                                    articleId: article._id
                                },
                                success: function(data) {
                                    console.log('data---', data);
                                    _this.getArticleList();
                                },
                                error: function(err) {
                                    console.log('err:::', err);
                                }
                            });
                        },

                        getArticleList: function() {
                            var _this = this;
                            $.ajax({
                                url: '/api/article/getArticleByUserId',
                                type: 'GET',
                                data: {},
                                success: function(data) {
                                    console.log('data---', data);
                                    _this.list = data.data;
                                },
                                error: function(err) {
                                    console.log('err::', err);
                                }
                            });
                        }
                    }
                });
                console.log('app--', app);
    </script>
</body>
</html>